<template>
	<view class="scope-container"
		:style="'min-height: 100vh; background: url(' + bgImage + '); background-size: 100% auto; background-position: 0 0;'">

		<navigator class="float-btn score" url="/pages/myScore/index">
			<image class="icon" mode="widthFix" src="https://cdn2.hquesoft.com/box/home/score.png"></image>
			<text class="text">{{scoreAlias}}</text>
			<view class="total" v-if="userInfo.score">{{userInfo.score | bigNumberDisplay}}</view>
		</navigator>

		<!-- <navigator class="float-btn chip" url="/pages/myChip/index">
			<image class="icon" mode="widthFix" src="https://cdn2.hquesoft.com/box/home/chip.png"></image>
			<text class="text">碎片</text>
			<view class="total" v-if="userInfo.chip_total">{{userInfo.chip_total}}</view>
		</navigator> -->
		
		<image @tap="switchBgmStatus" :class="{'animated': !isBgmLocalDisabled}" class="music-btn" v-if="bgmConfig.is_icon_show" src="http://hquesoft.oss-cn-shenzhen.aliyuncs.com/box/home/music.png" mode="widthFix"></image>

		<navigator url="/pages/myBox/index" class="my-box-float-btn">
			<image src="https://cdn2.hquesoft.com/box/home/box.png" mode="widthFix"></image>
		</navigator>
		
		<navigator url="/pages/rule/index?type=fudai" class="rule-float-btn">
			<image src="https://cdn2.hquesoft.com/cwe/home/rule.png" mode="widthFix"></image>
		</navigator>

		<!-- <navigator url="/pages/rule/index?type=fudai" class="rule-btn">
			规则
		</navigator> -->
		
		<!-- #ifdef MP-WEIXIN || APP-PLUS -->
		<image src="https://cdn2.hquesoft.com/cwe/home/share.png" class="share-float-btn" @tap="isSharePopup = true" mode="widthFix"></image>
		
		<!-- <view class="float-btn share" hover-class="hover" @tap="isSharePopup = true">
			<text class="new-iconfont icon-wechat"></text>
			<text>分享</text>
		</view> -->
		<!-- #endif -->
		
		<view class="action-arrow last" hover-class="hover" @tap="goLast">
			<text class="new-iconfont icon-arrow-right"></text>
		</view>
		
		<view class="action-arrow next" hover-class="hover" @tap="goNext">
			<text class="new-iconfont icon-arrow-right"></text>
		</view>

		<view class="main">
			<view class="popup-c">
				<template v-if="!isStopPopup">
					<image :src="item.thumb" mode="widthFix" class="sku-thumb" :class="'thumb-' + index"
						v-for="(item, index) in currentSkus"></image>
				</template>
			</view>

			<!-- <view class="main-box-c" @tap="toFudaiDetail">
				<image mode="widthFix" class="main-box" :src="current.image_3d || 'https://cdn2.hquesoft.com/box/home/box3d.png'"></image>
			</view> -->
			
			<view class="main-box-c" @tap="toFudaiDetail">
				<swiper :current="currentIndex" class="main-box-swiper" :circular="true" @change="currentChange">
					<swiper-item v-for="(item,index) in list" @tap="toFudaiDetail" :key="index">
						<image mode="aspectFit" class="main-box" :src="list[(index + 1) % list.length].image_3d || 'https://cdn2.hquesoft.com/box/home/bigbox.png'"></image>
					</swiper-item>
				</swiper>
				
				<!-- <image mode="widthFix" class="main-box" :src="current.image_3d || 'https://cdn2.hquesoft.com/box/home/bigbox.png'"></image> -->
			</view>
			
			<view class="bottom">
				<!-- <scroll-view class="fudai-list" scroll-x>
					<view class="item" @tap="changeIndex(index)" :class="{actived: currentIndex === index}"
						v-for="(item, index) in list">
						{{item.title}}
					</view>
				</scroll-view> -->
				
				<swiper :display-multiple-items="3.4" :current="currentIndex" class="fudai-list-swiper" :circular="true" @change="currentChange">
					<swiper-item v-for="(item,index) in list" @tap="tapSelectIndex(index)" :key="index">
						<view class="swiper-item" :class="{actived: targetIndex===index }">
							<!-- <image mode="aspectFill" class="thumb" :src="item.thumb"></image> -->
							<view class="title">{{item.title}}</view>
						</view>
					</swiper-item>
				</swiper>
				
				<!-- <swiper :display-multiple-items="5" :current="currentIndex" class="fudai-list-swiper" :circular="true" @change="currentChange">
					<swiper-item v-for="(item,index) in list" @tap="tapSelectIndex(index)" :key="index">
						<view class="item" @tap="changeIndex(index)" :class="{actived: currentIndex === index}">
							{{item.title}}
						</view>
					</swiper-item>
				</swiper> -->
				
				<view class="button-c">
					<image class="left-btn" @tap="freeOpen" src="https://cdn2.hquesoft.com/cwe/home/free.png" mode="widthFix"></image>
					<view class="confirm-btn" @tap="pay">
						<view class="discount-tips" v-if="discountTips">{{discountTips}}</view>
						<PriceDisplay :info="current"></PriceDisplay>
						<text style="margin-left: 10rpx;">开启</text>
					</view>
					<image class="right-btn" @tap="viewMore" src="https://cdn2.hquesoft.com/cwe/home/more.png" mode="widthFix"></image>
				</view>
				
				<view class="tips-c">
					未成年人必须在家长监督下使用
				</view>
			</view>

		</view>
		
		<PayCard :info="payInfo" @close="hidePayPopup" @success="paySuccess"  v-if="isPayPopup"></PayCard>
		
		<OpenBoxPopupTheme2 boxImgMode="square" :tryMode="isTryMode" :config="fudaiConfig" v-if="isShowResult" :order="order" @close="goBack" :boxImg="boxImage"></OpenBoxPopupTheme2>
		
		<Popup :info="popupSetting" @close="closePopup" v-if="isShowPopup"></Popup>
		
		<SharePopup v-if="isSharePopup" @close="isSharePopup = false" :info="posterInfo"></SharePopup>

		<Danmus v-if="danmuSetting.is_enabled" :setting="danmuSetting" :list="danmuList"></Danmus>

		<CouponPopup @close="isShowCouponPopupKey = false" @pickSuccess="closeCouponPopup" v-if="isShowCouponPopup"></CouponPopup>
		
		<FloatBtn v-if="uiConfig.is_show_float_btn" iStyle="bottom: 380rpx" :link="uiConfig.float_btn_link" :isAnimated="uiConfig.float_btn_is_animate" :src="uiConfig.float_btn_image"></FloatBtn>
		
	</view>
</template>

<script>
	import PayCard from "./components/PayCard.vue"
	
	import {
		mapGetters
	} from "vuex"

	export default {
		components: {
			PayCard
		},
		data() {
			return {
				scrollTop: 0,
				popupSetting: {
					number: ''
				},
				isShowPopupKey: true,
				danmuSetting: {},
				danmuList: [],
				refreshCounter: 0,
				getNextPageCounter: 0,
				list: [],
				currentIndex: 0,
				targetIndex: 1,
				isStopPopup: false,
				isPayPopup: false,
				isShowResult: false,
				order: {},
				fudaiConfig: {},
				isSharePopup: false,
				isShowCouponPopupKey: true,
				isInit: false,
				isTryMode: false
			}
		},
		computed: {
			...mapGetters(["userInfo"]),
			page() {
				return this.$store.getters.setting.box_home
			},
			config() {
				return this.$store.getters.setting.fudai_home || {}
			},
			uiConfig() {
				return this.fudaiConfig.ui || {}
			},
			isShowPopup() {
				let flag = uni.getStorageSync('popup_' + this.popupSetting.number)
				return this.popupSetting.is_enabled && this.isShowPopupKey && !flag
			},
			boxImage () {
				return this.current.image_3d || 'https://cdn2.hquesoft.com/box/fudai/box.png'
			},
			bgImage() {
				if (!this.isInit) {
					return ''
				}
				
				return this.config.bg || 'https://cdn2.hquesoft.com/box/home/bg.png'
			},
			current() {
				return this.list[this.targetIndex] || {}
			},
			currentSkus() {
				let length = this.current.skus && this.current.skus.length

				if (!length) {
					return []
				}

				let res = []
				for (let i = 0; i < 15; i++) {
					if (i >= length) {
						res.push(this.current.skus[i % length])
					} else {
						res.push(this.current.skus[i])
					}
				}
				return res
			},
			payInfo () {
				return {
					uuid: this.current.uuid,
					title: this.current.title,
					total_list: this.current.total_list,
					money_price: this.current.money_price,
					score_price: this.current.score_price
				}
			},
			discountTips () {
				let totalList = this.current.total_list || []
				for (let i=totalList.length-1; i>=0; i--) {
					// 有连开优惠
					if (totalList[i].is_discount) {
						let str = totalList[i].total + '连开优惠'
						
						if (totalList[i].money_discount) {
							str += (totalList[i].money_discount / 100) + '元'
						}
						if (totalList[i].score_discount) {
							str += totalList[i].score_discount + this.scoreAlias
						}
						
						return str
					}
				}
				
				return false
			},
			posterInfo () {
				let globalShareConfig = this.getShareConfig(false)
				
				return {
					money_price: this.current.money_price,
					score_price: this.current.score_price,
					title: this.current.title,
					path: globalShareConfig.path,
					app_url: globalShareConfig.app_url,
					thumb: this.current.thumb
				}
			},
			// 普通弹窗
			isShowPopup () {
				let flag = uni.getStorageSync('popup_' + this.popupSetting.number)
				return this.popupSetting.is_enabled && this.isShowPopupKey && !flag
			},
			// 优惠券弹窗
			isShowCouponPopup() {
				let flag = uni.getStorageSync('coupon_popup' + this.$store.getters.setting.coupon_popup.number)
				return this.$store.getters.setting.coupon_popup.is_enabled && this.isShowCouponPopupKey && !flag
			}
		},
		watch: {
			currentIndex (val) {
				this.isStopPopup = true 
				
				setTimeout(() => {
					this.isStopPopup = false
				}, 100)
				
				this.targetIndex = (val + 1) % this.list.length
			}
		},
		onLoad() {
			this.$visitor.record('box_index');

			this.getPopup()
			// console.log('text env', process.env.TEST);

			this.getDanmu();

			// uni.removeTabBarBadge(OBJECT)
			// uni.removeTabBarBadge({
			// 	index: 1
			// })
			
			this.$http('/fudai/home/config').then(res => {
				this.fudaiConfig = res.data.setting
				this.isInit = true
			})
			
			// 播放音乐
			setTimeout(() => {
				this.playHomeBgm()
			}, 100)
		},
		onPullDownRefresh() {
			this.$showPullRefresh().then(res => {
				this.refreshCounter++
			})
			this.getPopup()
			this.getDanmu()
		},
		onReachBottom() {
			this.getNextPageCounter++
			// console.log('reach bottom')
		},
		onShow() {
			this.$http('/home/fudais').then(res => {
				// 此处需要重复循环列表。数量少的时候会导致轮播图不显示
				this.list = [
					...res.data.list,
					...res.data.list,
					...res.data.list
				]
			})
		},
		methods: {
			freeOpen () {
				let obj = this.list[this.currentIndex] || {}
				uni.showModal({
					title: '试玩提示',
					content: '试玩开出的奖品仅作为演示作用，不可作发货及其它作用',
					confirmText: '同意试玩',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '操作中~'
							})
							
							this.$http('/fudai/try', 'POST', {
								uuid: obj.uuid,
								// page_uuid: this.pageUuid,
								total: 1
							}).then(res => {
								uni.hideLoading()
								this.isTryMode = true
								this.paySuccess(res.data, true)
							})
						}
					}
				})
			},
			// 查看更多 
			viewMore () {
				if (!this.uiConfig.more_link) {
					uni.showToast({
						title: '未设置跳转链接~',
						icon: 'none'
					})
				}
				this.toLink(this.uiConfig.more_link)
			},
			tapSelectIndex (index) {
				this.currentIndex = (index + this.list.length - 1) % this.list.length
			},
			playHomeBgm() {
				this.refreshCounter++
				if (!this.isBgmLocalDisabled && this.bgmConfig.is_home_bgm_enabled) {
					this.$playBgm(this.bgmConfig.home_bgm_src, {
						loop: this.bgmConfig.is_home_bgm_loop ? true : false
					})
				}
			},
			// 切换音乐开关
			switchBgmStatus() {
				console.log(this.isBgmLocalDisabled)
				if (this.isBgmLocalDisabled) {
					// 开启
					this.setStorage('is_bgm_local_disabled', false)
					setTimeout(() => {
						this.playHomeBgm()
					}, 100)
				}
				else {
					// 关闭
					this.setStorage('is_bgm_local_disabled', true)
					this.$stopBgm()
				}
				this.refreshCounter++
			},
			toFudaiDetail() {
				uni.navigateTo({
					url: '/pages/fudai/detail?uuid=' + this.current.uuid
				})
			},
			goLast() {
				if (this.currentIndex === 0) {
					uni.showToast({
						title: '已是第一个~',
						icon: 'none'
					})
					return false
				}
				this.currentIndex -= 1
			},
			goNext() {
				if (this.currentIndex == (this.list.length - 1)) {
					uni.showToast({
						title: '已是最后一个~',
						icon: 'none'
					})
					return false
				}
				this.currentIndex += 1
			},
			changeIndex(index) {
				this.currentIndex = index
			},
			currentChange(e) {
				this.currentIndex = e.detail.current
			},
			getDanmu() {
				this.$http('/danmus/home').then(res => {
					this.danmuSetting = res.data.setting
					this.danmuList = res.data.list
				})
			},
			getPopup() {
				this.$http('/setting/popup', 'GET', ).then(res => {
					this.popupSetting = res.data.setting
				})
			},
			closePopup() {
				uni.setStorageSync('popup_' + this.popupSetting.number, 1)
				this.isShowPopupKey = false
			},
			paySuccess (order, isTryMode = false) {
				this.isTryMode = isTryMode
				this.order = order
				this.isPayPopup = false 
				this.isShowResult = true
				// 购买成功
				
				// this.refresh()
			},
			goBack () {
				this.isShowResult = false 
			},
			hidePayPopup () {
				this.isPayPopup = false
			},
			pay () {
				this.isPayPopup = true
			},
			closeCouponPopup() {
				uni.setStorageSync('coupon_popup' + this.$store.getters.setting.coupon_popup.number, 1)
				this.isShowCouponPopupKey = false
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		}
	}
</script>

<style lang="scss" scoped>
	.scope-container {
		background-size: 100% auto !important;
	}
	
	.float-btn {
		position: fixed;
		background: white;
		padding: 16rpx 20rpx;
		top: 110rpx;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		z-index: 100;

		.icon {
			width: 36rpx;
			height: 36rpx;
		}

		.text {
			font-size: 28rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #000000;
			line-height: 26rpx;
			margin-left: 10rpx;
		}
		
		.total {
			position: absolute;
			padding: 0rpx 10rpx;
			line-height: 32rpx;
			height: 32rpx;
			background: #FF5C5C;
			color: white;
			right: -10rpx;
			top: -16rpx;
			font-size: 20rpx;
			font-weight: 500;
			border-radius: 16rpx;
		}
		
		&.share {
			right: 0rpx;
			top: 600rpx;
			font-size: 26rpx;
			border-radius: 33px 0px 0px 33px;
			.icon-wechat {
				font-size: 36rpx;
			}
			
			&::after {
				display: none;
			}
		}

		&.score {
			left: 60rpx;
		}

		&.chip {
			left: 260rpx;
		}
	}
	
	.music-btn {
		position: fixed;
		left: 60rpx;
		top: 200rpx;
		width: 70rpx;
		z-index: 1000;
		
		&.animated {
			animation-name:rotate;
			animation-duration:3s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
		}
	}
	
	.action-arrow {
		position: fixed;
		top: 50%;
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 50rpx;
		color: white;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.3);
		z-index: 100;
		&.last {
			left: 10rpx;
			transform: rotate(180deg);
		}
		&.next {
			right: 10rpx;
		}
	}
	
	
	.main {
		// border: 1px solid red;
		height: 100vh;
		position: relative;
		
		.main-box-c {
			// display: none;
			text-align: center;
			height: 460rpx;
			// border: 1px solid red;
			position: absolute;
			bottom: 360rpx;
			width: 100%;
			.main-box-swiper {
				height: 460rpx;
				// border: 1px solid green;
			}
			.main-box {
				width: 460rpx;
				height: 460rpx;
			}
		}
		
		.bottom {
			position: absolute;
			bottom: 30rpx;
			width: 100%;
			
			.fudai-list-swiper {
				// position: fixed;
				// bottom: 100rpx;
				// left: 0;
				height: 100rpx;
				margin-bottom: 50rpx;
				// height: 220rpx;
				// width: 750rpx;
				// margin-top: 30rpx;
				// overflow: hidden;
				// z-index: 10000;
				
				// left: 300rpx;
				// padding-left: 300rpx;
				// border: 1px solid red;
				
				swiper-item {
					// padding: 0rpx 10rpx;
					padding-right: 20rpx;
					box-sizing: border-box;
				}
					
				.swiper-item {
					// width: 180px;
					// width: 100rpx;
					width: 100%;
					box-sizing: border-box;
					height: 82rpx;
					line-height: 82rpx;
					background: rgba(255, 255, 255, 0.3);
					border-radius: 42rpx;
					display: inline-block;
					// padding: 0rpx 20rpx;
					// margin-left: 30rpx;
					min-width: 120rpx;
					text-align: center;
					color: #000;
					font-size: 28rpx;
					font-weight: bold;
								
					&:first-child {
						// margin-left: 30rpx;
					}
								
					&.actived {
						background: white;
						font-size: 30rpx;
					}
				}
			}
			
			.button-c {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 130rpx;
				// border: 1px solid red;
				.left-btn {
					width: 120rpx;
					margin-left: 10rpx;
				}
				
				.right-btn {
					width: 120rpx;
					margin-right: 10rpx;
				}
				
				.confirm-btn {
					width: 600rpx;
					height: 100rpx;
					margin: 0rpx 20rpx 0rpx 20rpx;
					background: linear-gradient(0deg, #F6EA75, #FFEF58);
					border-radius: 50rpx;
					text-align: center;
					line-height: 100rpx;
				
					font-size: 32rpx;
					font-family: PingFang;
					font-weight: bold;
					color: #000000;
					position: relative;
					
					.discount-tips {
						// color: red;
						background: #FF5C5C;
						color: white;
						border-radius: 50rpx;
						// width: 100rpx;
						height: 50rpx;
						line-height: 50rpx;
						font-size: 24rpx;
						padding: 0rpx 20rpx;
						display: inline-block;
						position: absolute;
						top: -26rpx;
						right: 20rpx;
					}
				}
			}
			
			.tips-c {
				text-align: center;
				margin-top: 20rpx;
				font-size: 24rpx;
			}
			
		}
	}

	.my-box-float-btn {
		position: fixed;
		right: 0rpx;
		top: 200rpx;
		z-index: 100;

		image {
			width: 90rpx;
			height: 90rpx;
		}
	}
	
	.rule-float-btn {
		position: fixed;
		right: 0rpx;
		top: 340rpx;
		z-index: 100;
	
		image {
			width: 90rpx;
			height: 90rpx;
		}
	}
	
	.share-float-btn {
		position: fixed;
		right: 0rpx;
		top: 480rpx;
		z-index: 100;
	
		width: 90rpx;
		height: 90rpx;
	}

	.rule-btn {
		background: #FCED64;
		border-radius: 50rpx 0rpx 0rpx 50rpx;
		// width: 100rpx;
		position: fixed;
		right: 0rpx;
		top: 500rpx;
		text-align: center;
		font-size: 26rpx;
		font-weight: 500;
		padding: 10rpx 16rpx 10rpx 26rpx;
		z-index: 100;

		// position: fixed;
		// right: 0rpx;
		// top: 300rpx;
		// image {
		// 	width: 120rpx;
		// 	height: 120rpx;
		// }
	}

	@keyframes popupLeft {
		0% {
			width: 0rpx;
			height: 0rpx;
			bottom: 0rpx;
			left: 376rpx;
			opacity: 1;
		}

		10% {
			width: 100rpx;
			height: 100rpx;
			bottom: 100rpx;
			left: 196rpx;
			opacity: 1;
		}

		// 50%  {
		//   width: 100rpx;
		//   height: 100rpx;
		//   bottom: 200rpx;
		//   left: 276rpx;
		// }
		100% {
			width: 160rpx;
			height: 160rpx;
			bottom: 800rpx;
			left: 76rpx;
			opacity: 0.4;
		}
	}
	
	@keyframes popupCenter {
		0% {
			width: 0rpx;
			height: 0rpx;
			bottom: 0rpx;
			left: 376rpx;
			opacity: 1;
		}
	
		10% {
			width: 100rpx;
			height: 100rpx;
			bottom: 140rpx;
			left: 326rpx;
			opacity: 1;
		}
	
		// 50%  {
		//   width: 100rpx;
		//   height: 100rpx;
		//   bottom: 200rpx;
		//   left: 276rpx;
		// }
		100% {
			width: 160rpx;
			height: 160rpx;
			bottom: 900rpx;
			left: 298rpx;
			opacity: 0.6;
		}
	}
	
	@keyframes popupRight {
		0% {
			width: 0rpx;
			height: 0rpx;
			bottom: 0rpx;
			left: 376rpx;
			opacity: 1;
		}
	
		10% {
			width: 100rpx;
			height: 100rpx;
			bottom: 100rpx;
			left: 456rpx;
			opacity: 1;
		}
	
		// 50%  {
		//   width: 100rpx;
		//   height: 100rpx;
		//   bottom: 200rpx;
		//   left: 276rpx;
		// }
		100% {
			width: 160rpx;
			height: 160rpx;
			bottom: 800rpx;
			left: 536rpx;
			opacity: 0.6;
		}
	}
	
	@keyframes rotate{
	
	  0%{transform:rotateZ(0deg);}
	
	  100%{transform:rotateZ(360deg);}
	
	}

	.popup-c {
		width: 750rpx;
		height: 46vh;
		// border: 1px solid red;
		// margin-top: 200rpx;
		// padding-top: 200rpx;
		position: relative;
		top: 100rpx;
		pointer-events: none;
		z-index: 10;

		.sku-thumb {
			position: absolute;
			border-radius: 50%;
			border: 4rpx solid white;
			width: 0rpx;
			height: 0rpx;
			opacity: 1;


			animation-duration: 12s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;

			&.thumb-3,
			&.thumb-4,
			&.thumb-5 {
				animation-delay: 3s;
			}

			&.thumb-6,
			&.thumb-7,
			&.thumb-8 {
				animation-delay: 6s;
			}

			&.thumb-9,
			&.thumb-10,
			&.thumb-11 {
				animation-delay: 9s;
			}

			&.thumb-12,
			&.thumb-13,
			&.thumb-14 {
				animation-delay: 12s;
			}
			
			&.thumb-0,
			&.thumb-3,
			&.thumb-6,
			&.thumb-9,
			&.thumb-12 {
				animation-name: popupLeft;
			}
			
			&.thumb-1,
			&.thumb-4,
			&.thumb-7,
			&.thumb-10, 
			&.thumb-13 {
				animation-name: popupCenter;
			}
			
			&.thumb-2,
			&.thumb-5,
			&.thumb-8,
			&.thumb-11,
			&.thumb-14 {
				animation-name: popupRight;
			}

		}

	}
</style>
